<template>
  <swiper ref="mySwiper" :options="swiperOptions" id="bancss_hook">
    <swiper-slide v-for="(item,index) in banners" :key="index">
      <div class="slide-inner" :style="{backgroundImage:'url('+item.pic+')'}"></div>
    </swiper-slide>
    <div class="swiper-pagination" slot="pagination"></div>
  </swiper>
</template>

<script>
import { Swiper, SwiperSlide, directive } from "vue-awesome-swiper";
import "swiper/css/swiper.css";
import { getBanner, getLocalBanner } from "@/request/api.js";
export default {
  components: {
    Swiper,
    SwiperSlide
  },
  directives: {
    swiper: directive
  },
  data() {
    return {
      banners: [],
      swiperOptions: {
        loop: false,
        speed: 700,
        grabCursor: true,
        watchSlidesProgress: true,
        mousewheelControl: true,
        keyboardControl: true,
        pagination: {
          el: ".swiper-pagination",
          dynamicBullets: true,
          dynamicMainBullets: 1,
          bulletElement: "i"
        },
        on: {
          progress: function() {
            var swiper = this;
            for (var i = 0; i < swiper.slides.length; i++) {
              var slideProgress = swiper.slides[i].progress;
              var innerOffset = swiper.width * 0.5;
              var innerTranslate = slideProgress * innerOffset;
              swiper.slides[i].querySelector(".slide-inner").style.transform =
                "translate3d(" + innerTranslate + "px, 0, 0)";
            }
          },
          touchStart: function() {
            var swiper = this;
            for (var i = 0; i < swiper.slides.length; i++) {
              swiper.slides[i].style.transition = "";
            }
          },
          setTransition: function(speed) {
            var swiper = this;
            for (var i = 0; i < swiper.slides.length; i++) {
              swiper.slides[i].style.transition = speed + "ms";
              swiper.slides[i].querySelector(".slide-inner").style.transition =
                speed + "ms";
            }
          }
        }
      }
    };
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper;
    }
  },
  async mounted() {
    // 获取轮播图数据
    // const bannerData = await getBanner({ clientType: "iphone" });  //老api
    const bannerData = await getLocalBanner({ type: "2" });
    this.banners = bannerData.banners;
  }
};
</script>

<style lang="less" >
#bancss_hook .swiper-slide {
  // height: 161px;
  padding-bottom: 38.888%;
  overflow: hidden;
  position: relative;
  .slide-inner {
    .bz(cover);
    .posfull;
  }
}
#bancss_hook .swiper-pagination-bullet {
  background: url("yf.png") no-repeat center;
  width: 24px;
  height: 24px;
  .bz(cover);
  opacity: 1;
}
#bancss_hook
  .swiper-pagination-bullets.swiper-pagination-bullets-dynamic
  .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: url("yf_act.png") no-repeat center;
  width: 24px;
  height: 24px;
  .bz(cover);
}
</style>